<template>
  <n-card title="修改密码">
    <n-space vertical class="box">
      <n-form
        ref="formRef"
        label-placement="left"
        :model="formData"
        :rules="modelRules"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="medium"
      >
        <n-form-item label="原密码" path="oldPwd">
          <n-input v-model:value="formData.oldPwd" placeholder="请输入原密码" />
        </n-form-item>
        <n-form-item label="新密码" path="newPwd">
          <n-input v-model:value="formData.newPwd" placeholder="请输入新密码" />
        </n-form-item>
        <n-form-item label="确认密码" path="confirmPwd">
          <n-input v-model:value="formData.confirmPwd" placeholder="请输入确认密码" />
        </n-form-item>
        <n-space>
          <n-button type="info" @click="handleSave">确定</n-button>
          <n-button @click="handleReset">重置</n-button>
        </n-space>
      </n-form>
    </n-space>
  </n-card>
</template>
<script lang="ts" setup>
  import { NForm, NFormItem, NInput, NCard, NButton, NSpace } from 'naive-ui'
  import type { FormRules, FormInst } from 'naive-ui'
  import { ref } from 'vue'
  const formRef = ref<FormInst | null>(null)
  const formData = ref({
    oldPwd: null,
    newPwd: null,
    confirmPwd: null
  })
  const modelRules: FormRules = {
    oldPwd: { required: true, message: '请输入原密码', trigger: 'blur' },
    newPwd: { required: true, message: '请输入新密码', trigger: 'blur' },
    confirmPwd: { required: true, message: '请输入确定密码', trigger: 'blur' }
  }
  // 确定
  function handleSave(e: MouseEvent) {
    e.preventDefault()
    formRef.value?.validate((errors) => {
      if (!errors) {
        console.log(errors)
      } else {
        console.log(errors)
      }
    })
  }
  // 重置
  function handleReset() {
    formData.value = {
      oldPwd: null,
      newPwd: null,
      confirmPwd: null
    }
  }
</script>
<style lang="less" scoped>
  .box {
    width: 500px;
  }
</style>
